<template>
	<view class="login">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->

		<!-- 内容 -->
		<view class="cont">
			<view class="title">欢迎登录</view>
			<!-- <view class="name">Bee到家政APP</view> -->
			<wInput v-model="nameData" type="text" maxlength="11" placeholder="请输入账号"></wInput>
			<wInput v-model="passData" type="password" maxlength="20" placeholder="请输入密码" isShowPass></wInput>
			<view class="tips"></view>
			<wButton text="登 录" :rotate="isRotate" @click.native="startLogin()" class="wbutton"></wButton>
			<view class="clearfix nav">
				<!-- <navigator url="/pageageA/pages/register/gender" style="padding-left: 30rpx;">注册账号</navigator> -->
				<button class="wxlogin" @click="zhuCe()">注册账号</button>
				<!-- <navigator url="/pageageA/pages/register/loginPhone" class="fl">验证码登录</navigator> -->
				<button class="wxlogin" open-type="getUserInfo"  @getuserinfo="bindGetUserInfo()">微信登录</button>
			</view>
		</view>
		<!-- end -->

		<!-- 其他登录方式 -->
		<view class="other">
			<view class="mor-link clearfix">
				<view class="botton">
					<!-- <image src="/static/images/middle_button_WeChat@2x.png" mode="widthFix"></image> -->
					<navigator url="/pageageA/pages/register/retrieve" style="text-align: center;text-decoration:underline">忘记密码</navigator>
				</view>
			</view>
		</view>
		<!-- end -->
	</view>
	
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import wInput from '@/components/button/watch-input.vue'; //input
import wButton from '@/components/button/watch-button.vue'; //button
import {mapState,mapMutations} from 'vuex'
import WXBizDataCrypt from "@/common/WXBizDataCrypt.js"
var _this;
export default {
	components: {
		PublicHeader,
		wInput,
		wButton
	},
	data() {
		return {
			title: '',
			nameData: '', //用户名
			passData: '', //密码
			// nameData: '1170645311', //用户名
			// passData: 'tiandao01', //密码
			isRotate: false //是否加载旋转
		};
	},
	
	mounted() {
		_this = this;
		uni.getStorage({
		    key: 'parentId',
		    success: function (res) {
				console.log('成功',res)
				_this.parentId = res.data
		    },
			fail: function (res) {
				console.log('失败',res)
			}
		});
	},
	computed:mapState(['forcedLogin','hasLogin']),
	methods: {
		...mapMutations(['login']),
		getPhoneNumber(e){
			uni.getProvider({
				  service: 'oauth',
				  success: function (res) {
					if (~res.provider.indexOf('weixin')) {
						uni.login({
							provider: 'weixin',
							success: (loginRes) => {
								_this.$http.get('/WeChat/MiniProgram/get/Access/Key/' + loginRes.code, {
									appid: 'wx74c82575ffce4b03',
									secret:'3a929a22d8977914f8f5029d4d14726f'
								}).
								then(function (infoRes) {
									let pc = new WXBizDataCrypt('wx74c82575ffce4b03',infoRes.data.session_key);           //wxXXXXXXX为你的小程序APPID  
									let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);  
									uni.getUserInfo({
									  provider: 'weixin',
									  success: function (infoRes) {
										console.log('用户昵称为：' + infoRes.userInfo.nickName);
									  }
									});
									console.log(data)
									console.log(data.phoneNumber)
									if(e.detail.errMsg == "getPhoneNumber:ok"){
										console.log("用户点击了接受")
									}else{
										console.log("用户点击了拒绝")
									}
								}).catch(function (error) {
									console.log(error);
								});
							},
							fail: () => {
								uni.showToast({title:"微信登录授权失败",icon:"none"});
							}
						})
					}else{
						uni.showToast({
							title: '请先安装微信或升级版本',
							icon:"none"
						});
					}
				  }
				});
		},
		bindGetUserInfo(e) {
			// uni.getStorage({
			// 	key:'parentId'
			// })
			uni.getProvider({
			  service: 'oauth',
			  success: function (res) {
				  console.log(res,"res")
				if (~res.provider.indexOf('weixin')) {
					uni.login({
						provider: 'weixin',
						success: (loginRes) => {
							_this.$http.get('/WeChat/MiniProgram/get/Access/Key/' + loginRes.code, {
								appid: 'wx74c82575ffce4b03',
								secret:'3a929a22d8977914f8f5029d4d14726f'
							}).
							then(function (infoRes) {
								console.log(infoRes,"infoRes")
								let openid = infoRes.data.openid
								uni.getUserInfo({
									provider: 'weixin',
									success: (info) => {//这里请求接口
									let nickName = info.userInfo.nickName
									let gender = info.userInfo.gender
									let avatarUrl = info.userInfo.avatarUrl
									// uni.navigateTo({
									// 	url:'/pageageA/pages/register/boundPhone?nickName='+nickName+'&gender='+gender+'&avatarUrl='+avatarUrl+'&openid='+openid
									// })
									_this.$http.post('/login/mandate', {
										openid:openid,
										nickName:nickName,
										gender:gender,
										avatarUrl:avatarUrl,
									}).
									then(function (response) {
										if (response.success) {
											console.log(response)
											setTimeout(function(){
												uni.switchTab({
													url:'/pages/index'
												})
											},500)
										}
										_this.login(response.data)
										console.log(_this.hasLogin,"===")
									}).catch(function (error) {
										console.log(error);
									});
										// _this.wxLogin(loginRes)
									},
									fail: () => {
										uni.showToast({title:"微信登录授权失败",icon:"none"});
									}
								})
							})
						},
						fail: () => {
							uni.showToast({title:"微信登录授权失败",icon:"none"});
						}
					})
				}else{
					uni.showToast({
						title: '请先安装微信或升级版本',
						icon:"none"
					});
				}
			  }
			});
		},
		startLogin() {
			//登录
			if (_this.isRotate) {
				//判断是否加载中，避免重复点击请求
				return false;
			}
			if (_this.nameData.length == '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '用户名不能为空'
				});
				return;
			}
			if (_this.passData.length == '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '密码不能为空'
				});
				return;	
			}
			_this.isRotate = true;
			_this.$http
				.post('/user/login', {
					account: _this.nameData,
					password: _this.passData
				})
				.then(function(response) {
					if (response.success){
						_this.login(response.data)
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '登录成功'
						});
						setTimeout(function() {
							_this.isRotate = false;
							uni.switchTab({
								url: '/pages/index'
							});
						}, 1000);
					} else {
						_this.isRotate = false;
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: response.msg
						});
					}
				})
				.catch(function(error) {
					console.log('失败', error);
				});
		},
		zhuCe(){
			uni.navigateTo({
				url:'/pageageA/pages/register/gender'
			})
		}
	}
};

</script>


<style scoped lang="scss">
.cont {
	padding: 0 120rpx;
	color: #f4333d;
	font-size: 24rpx;
	letter-spacing: 0.67rpx;
	line-height: 52rpx;
	margin-top: 125rpx;
}
.cont .title {
	font-size: 35rpx;
	color: #333;
	letter-spacing: 1.52rpx;
	line-height: 45rpx;
	margin-bottom: 68rpx;
	text-align: center;
}
.cont .name {
	font-size: 50rpx;
	color: #333;
	line-height: 70rpx;
	letter-spacing: 2.38rpx;
	font-weight: 500;
	margin-bottom: 8rpx;
}
.cont > navigator {
	color: #65b4ff;
	font-size: 32rpx;
	letter-spacing: 1.52rpx;
	line-height: 45rpx;
}
.cont input {
	height: 100rpx;
	line-height: 100rpx;
	font-size: 36rpx;
	color: #333;
	letter-spacing: 1.71;
	border-bottom: 1rpx solid #e7e7e7;
	margin-bottom: 10rpx;
}
.cont .btn {
	width: 582rpx;
	height: 84rpx;
	line-height: 84rpx;
	text-align: center;
	background-color: $uni-color1;
	box-shadow: 0px 14rpx 40rpx 0rpx $uni-color1;
	border-radius: 45rpx;
	color: #fff;
	font-size: 32rpx;
	/* margin-top: 30rpx; */
}
.cont .password {
	position: relative;
}
.cont .password image {
	width: 37rpx;
	position: absolute;
	right: 0;
	top: 48rpx;
}
.cont .nav {
	color: #888;
	font-size: 28rpx;
	margin-top: 45rpx;
	display: flex;
	justify-content: space-between;
}
.cont .tips {
	height: 80rpx;
	line-height: 70rpx;
}
.other{
	padding-top: 470rpx;
}
.mor {
	position: relative;
	padding: 64rpx;
	/* margin: 0 auto; */
	/* padding-top:350rpx; */
}
.mor .line {
	width: 100%;
	height: 1rpx;
	background-color: #e6e6e6;
}
.mor .ot {
	width: 180rpx;
	text-align: center;
	position: absolute;
	font-size: 24rpx;
	color: #888;
	letter-spacing: 1.14rpx;
	left: 50%;
	top: 48rpx;
	margin-left: -90rpx;
	background: #fff;
	margin-bottom: 52rpx;
}
.mor-link {
	color: #888;
	font-size: 22rpx;
	letter-spacing: 0.85rpx;
	width: 500rpx;
	margin: 0 auto;
	// display: flex;
	// justify-content: center;
	// align-items: center;
	/* margin-top: 50rpx; */
}
.mor-link image {
	width: 48rpx;
	/* margin-left: 22rpx;
	margin-bottom: 18rpx; */
}
.botton{
	// width: 360rpx;
	// height: 160rpx;
	// margin: 0 auto;
	/* background-color: pink; */
	// display: flex;
	// justify-content: center;
	// align-items: center;
	// flex-direction: column;
}
.wxlogin{
	border: none !important;
	background: none;
	height: 60rpx;
	line-height: 53rpx;
	font-size: 28rpx;
	// padding-left: 220rpx;
	color: #999999;
	margin-left: 0;
	margin-right: 0;
}
uni-button{
	line-height: 1;
	color: #666!important;
}
.wxlogin:after{
	border: none !important;
}
</style>
